<template>
  <div class="app-container">
    <div class="table-wrapper">
      <el-tabs
        v-model="tabsActivity"
        type="border-card">
        <el-tab-pane label="代理人管理" name="agentor">
          <div>
            <el-form :model="formData" label-width="100px">
              <el-col :span="6" style="width: 300px">
                <el-form-item label="姓名: ">
                  <el-input v-model="formData.name" placeholder="可查询代理人姓名" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" v-if="false">
                <el-form-item label="手机号: ">
                  <el-input v-model="formData.phone" placeholder="可查询代理人手机号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" class="btn-area">
                <el-button icon="el-icon-search" type="primary" @click="doSearch">查询</el-button>
              </el-col>
            </el-form>
          </div>
          <el-table :data='listData' style="width: 100%" v-loading='loading'>
            <el-table-column label="#" width="50" type="index"></el-table-column>
            <el-table-column label="代理人姓名" width="140" prop="nickName">
            </el-table-column>
            <el-table-column label="订单总数" width="140" prop="totalOrderNum" align="center"></el-table-column>
            <el-table-column label="订单总金额(元)" prop="totalOrderAmount" width="120">
            </el-table-column>
            <el-table-column label="总佣金金额" prop="totalOrderIncome"></el-table-column>
            <el-table-column label="操作" width="140" fixed="right" v-if="false">
              <template slot-scope="{ row }">
                <div>
                  <el-button size="small" type="primary" v-if="row.status === 0" @click="reviewWithdraw(row)">审核通过</el-button>
                  <el-button size="small" type="text" v-else disabled>已通过</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              :current-page.sync="pagination.pageNum"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pagination.pageSize"
              :total="pagination.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="根代理拓展" name="rootAgentro">
          <div class="qr-code-wrapper" v-loading="loading">
            <div class='tips'>请将下方二维码分享给根级代理, <a href="###" @click='downloadQrCode'>点击下载</a>或截图</div>
            <div class="img-wrapper">
              <img class="qr-code-img"  :src="QRCodeBase64" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import mixin from './mixin'
export default {
  mixins: [mixin]
}
</script>

<style lang="scss" scoped>
    @import "./style.scss";
</style>
